<template>
    <div class="chart-box" ref="chart"> </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "CaseOnline",
    data() {
        return {
            options: {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    top: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    show: false,
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: '16'
                        },
                    },
                },
                yAxis: [{
                    type: 'category',
                    inverse: true,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: '16'
                        },
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    data: ['渝中', '渝北', '江北', '南岸', '沙坪坝', '九龙坡']
                }, {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                        textStyle: {
                            color: '#ffffff',
                            fontSize: '16'
                        },
                        formatter: function (value) {
                            return value.toLocaleString() + '%';

                        },
                    },
                    data: [95, 90, 88, 96, 30, 100]
                }],
                series: [{
                    name: '百分比',
                    type: 'bar',
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [0, 30, 30, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: '#A29E25'
                            }, {
                                offset: 1,
                                color: '#FFA200'
                            }]),
                        },
                    },
                    barWidth: 15,
                    data: [95, 90, 88, 96, 30, 100]
                },
                ]
            }
        }
    },
    mounted() {
        setTimeout(() => {
            const chart = echarts.init(this.$refs.chart)
            chart.setOption(this.options)
        }, 0);
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 385px;
}
</style>